<script setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"

// 创建一个对 DOM 容器的引用
const pieChartRef = ref(null)

// 定义 ECharts 的配置项，设置文本颜色为白色，并将图表居中
const option = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "2%",
    left: "center",
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12",
    },
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      center: ["50%", "60%"], // 图表居中
      radius: ["40%", "50%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
      },
      color: ["#62c98d", "#2f89cf", "#4cb9cf", "#e0c828", "#e58c00", "#eb295b"],
      label: { show: true },
      labelLine: { show: false },

      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: "bold",
          color: "rgba(255,255,255,.5)", // 强调状态下的文字为白色
        },
      },
      labelLine: {
        show: true,
        lineStyle: {
          color: "#ffffff", // 标签线条颜色为白色
        },
      },
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
    },
  ],
}

// 在组件挂载时初始化 ECharts
onMounted(() => {
  const chart = echarts.init(pieChartRef.value) // 初始化 ECharts 实例
  chart.setOption(option) // 应用配置

  // 窗口大小变化时自适应
  window.addEventListener("resize", () => {
    chart.resize()
  })
})
</script>

<template>
  <div class="line-chart">
    <div class="chart-header">
      <h2>饼图</h2>
    </div>
    <div class="chart-body">
      <div ref="pieChartRef" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.line-chart {
  height: 100%;
  width: 100%;

  .chart-header {
    height: 15%;
    border-bottom: 1px solid rgba(7, 118, 181, 0.7);
    font-weight: 500;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    &::after {
      width: 100%;
      height: 1px;
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
      box-shadow: 0 0 5px rgba(131, 189, 227, 1);
      opacity: 0.6;
    }

    &::before {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      background: rgba(22, 214, 255, 0.9);
      box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
      border-radius: 10px;
      left: 10px;
      top: 50%;
      transform: translate(0, -50%);
    }

    h2 {
      font-weight: 500;
      font-size: 16px;
      margin-left: 30px;
    }
  }

  .chart-body {
    height: 85%;
    padding: 0 10px 10px;
  }
}
</style>
